<template>
  <div class="app">
    <h1 style="margin-top: 3px;margin-left: 5px;font-size: 14px;">黑名单公示</h1>
    <div class="percent">
      <div class="percents">
        <div class="percentinfo">
          <p class="percntwenzi">
            累计完成
          </p>
          <dv-percent-pond class="p_info" :config="config" style="width:200px;height:25px;margin-top: -5px;" />
          <p style="margin-left: 10px;font-size:8px">{{ config.value }}%</p>
        </div>
        <div class="percentinfo">
          <p class="percntwenzi">
            标准进度
          </p>
          <dv-percent-pond class="p_info" :config="config2" style="width:200px;height:25px;margin-top: -5px;" />
          <p style="margin-left: 10px;font-size:8px">{{ config2.value }}%</p>
        </div>
        <div class="percentinfo">
          <p class="percntwenzi">
            上月完成度
          </p>
          <dv-percent-pond class="p_info" :config="config3" style="width:200px;height:25px;margin-top: -5px;" />
          <p style="margin-left: 10px;font-size:8px">{{ config3.value }}%</p>
        </div>
        <div class="percentinfo">
          <p class="percntwenzi">
            本月完成度
          </p>
          <dv-percent-pond class="p_info" :config="config4" style="width:200px;height:25px;margin-top: -5px;" />
          <p style="margin-left: 10px;font-size:8px">{{ config4.value }}%</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  setup() {
  },
  data() {
    return {
      config: {
        value: 66,
        lineDash: [5, 2],
        colors: ['#6699ff', '#6699ff'],
      },
      config2: {
        value: 54.25,
        lineDash: [5, 2],
        colors: ['#ffcc00', '#ffcc00'],
      },
      config3: {
        value: 85.15,
        lineDash: [5, 2],
        colors: ['#6699ff', '#6699ff'],
      },
      config4: {
        value: 70,
        lineDash: [5, 2],
        colors: ['#0099ff', '#0099ff'],
      }
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}

.percent {
  display: flex;
  flex-direction: column;
}

.percents {
  display: flex;
  flex-direction: column;
  margin-top: 35px;
  margin-left: 40px;
}

.percentinfo {
  display: flex;
  flex-direction: row;
  height: 50px;
  line-height: 0px;
}

.percntwenzi {
  font-size: 8px;
  margin-right: 20px;
  width: 100px;
  text-align: right
}
</style>